<template>
  <div class="Mainbox">

    <!-- 设置 -->
    <heads v-show="!bol" class="HeadTop1">
        <i @click="zhu()"></i>
        <span>设置</span>
    </heads>
        <!-- 主页 -->
    <heads v-show="arr1[0]" class="HeadTop1">
        <i @click="success()"></i>
        <span>个人信息</span>
    </heads>
    <!-- 修改密码 -->
    <heads v-show="arr1[1]" class="HeadTop1">
        <i @click="success()"></i>
        <span>修改登录密码</span>
        <em >完成</em>
    </heads>
    <mains>
        <!-- 主页 -->
        <!-- 设置 -->
        <div class="mainreset" v-show="!bol">
            <div class="mreset1">
                <div class="w" v-for="(it,index) in arr2" :key="index" @click="mreset(index)">
                <span>{{it}}</span><em v-if="index==2">{{seror}}</em><i class="el-icon-arrow-right"></i>
                </div>
            </div>
            <div class="msearch" v-show="arrbol[0]">清除成功</div>
            <div class="msearch" v-show="arrbol[1]">检查中...</div>
            <div class="msearch" v-show="arrbol[2]">已是最新版本</div>
        </div>

         <!--账户管理 -->
        <div class="newPwd" v-show="arr1[0]">
            <div class="nPwd" v-for="(item,index) in arr" :key="index" v-show="index==2">
                <div v-if="index==2">手机号:{{item.cont1}} <i></i> </div>
            </div>
        </div>
        <!-- 修改登录密码 -->
        <div class="newPwd" v-show="arr1[1]">
            <div v-for="(item,ind) in pwdArr" :key="ind" class="nPwd">
                <span>{{item.a1}} :</span>
                <input type="text" :placeholder="item.a2"/>
            </div>
        </div>
    </mains>
    <!-- 遮罩 -->
    <zhe v-show="zhe1">
        <div class="w-tan1">
            <div class="tan">
                <div>确认清除缓存？</div>
                <div>
                    <span class="btn1" @click="quxiao()">取消</span>
                    <span class="btn2" @click="qingkong()">确定</span>
                </div>
            </div>
        </div>
    </zhe>

  </div>
</template>

<script>
import Head from './Head.vue';
import Main from './Main.vue';
import Ald from '../Ald.vue';
export default {
    name:'Reset',
    data(){
        return{
            arr1:[false,false],
            zhe1:false,
            bol1:false,
            arrbol:[false,false,false],
            bol:false,
            pwd:false,
            ni:this.$store.state.name,
            arr:[
                {
                    key1:'头像',
                    cont1:this.$store.state.headImg,
                },
                {
                    key1:'昵称',
                    cont1:this.$store.state.name,


                },{
                    key1:'手机号',
                    cont1:'15012340809',
                }

            ],
            arr2:['账户管理','修改登录密码','清除缓存','阿拉灯平台协议','个人委托协议','检查更新'],
            // 缓存
            seror:'10KB',
            pwdArr:[
                {
                    a1:'输入原密码',
                    a2:'请输入原密码'
                },{
                    a1:'输入新密码',
                    a2:'请输入新密码'
                },{
                    a1:'确认新密码',
                    a2:'请确认新密码'
                }
            ]

        }
    },
    components:{
        'heads':Head,
        'mains':Main,
        'zhe':Ald,
    },
    methods:{
        zhu(){
            this.$router.replace('/login');
        },
        change(in1){
            console.log(in1);
            this.bol1=!this.bol1;
            if(in1==0){
                this.$set(this.arrbol,0,true);
            }else if(in1==1){
                this.$set(this.arrbol,1,true);
            }else if(in1==2){
                this.$set(this.arrbol,2,true);
            }
        },
        mreset(index){
            console.log(index);
            var aa=3;
            if(index==0){
                this.bol=!this.bol;
                this.$set(this.arr1,0,true);
            }else if(index==1){
                this.bol=!this.bol;
                this.$set(this.arr1,1,true);
            }else if(index==2){
                this.zhe1=!this.zhe1;

            }else if(index==5){
                setInterval(() => {
                    aa--;
                    if(aa>1){
                        this.shua();
                        console.log(aa);
                    }else if(aa>0){
                        this.shua1();
                        console.log(aa);
                    }else if(aa==0){
                        console.log(aa);
                        this.$set(this.arrbol,1,false);
                        this.$set(this.arrbol,2,false);
                    }
                    
                }, 1000);
            }
        },
        shua(){
            this.$set(this.arrbol,1,true);
        },
         shua1(){
            this.$set(this.arrbol,2,true);
            this.$set(this.arrbol,1,false);
        },
        qingkong(){
            var aa=3;
            this.seror='0KB';
            this.zhe1=!this.zhe1;
            setInterval(() => {
                aa--;
                if(aa>1){
                this.$set(this.arrbol,0,true);
                }else if(aa>0){
                this.$set(this.arrbol,0,false);
                }
            }, 1000);
        },
        quxiao(){
            this.seror='10KB';
            this.zhe1=!this.zhe1;
        },
        gb1(){
            this.bol1=!this.bol1;
            this.arrbol=[false,false,false];
        },
        success(){
            this.bol=!this.bol;
            this.$set(this.arr1,0,false);
            this.$set(this.arr1,1,false);
        }
    }
}
</script>

<style scoped>

/* 账户管理 */
.nPwd div{
    height: 10rem;
    font-size: 2.8rem;
    color: #4c4c4c;
    text-align: left;
    border-top: 0.1rem solid #ccc;
    border-left: 0.1rem solid #ccc;
    border-right: 0.1rem solid #ccc;
    padding-left: 6rem;
    position: relative;
}
.nPwd div i{
    position: absolute;
    top: calc(50% - 1.5rem);
    left: 2rem;
    height: 3rem;
    width: 2.2rem;
    background: url(../../assets/user/redphone.png) no-repeat 0 0;

}
/* 密码修改 */
.newPwd input:nth-child(1){
    border-top: 0.1rem solid #ccc;
}
.nPwd{
    height: 10rem;
    line-height: 10rem;
    border-bottom: 0.1rem solid #ccc;
    background-color: #fff;
    position: relative;
}
.nPwd span{
    font-size: 2.8rem;
    color: #4c4c4c;
    position: absolute;
    top: 0;
    left: 0;
    height: 10rem;
    width: 20rem;
    line-height: 10rem;
}
.nPwd input{
     width: calc(100% - 22rem);
    padding: 0 2rem 0 20rem;
    height: 10rem;
    line-height: 10rem;
    font-size: 2.4rem;
    color: #808080;
    text-align: left;

}
/* 遮罩 */
.w-tan1{
    width: calc(100% - 32rem);
    padding: 0 16rem;

}
.tan{
    width: calc(100% - 32rem);
    height: 25rem;
    background-color: #fff;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-12.5rem);
    z-index: 11;
}
.tan div:nth-child(1) {
   width:100%;
   height: 16.9rem;
   line-height: 16.9rem;
   color: #4c4c4c;
   font-size: 3rem;
}
.tan div:nth-child(2) {
    line-height: 8rem;
    height: 8rem;
    width: 100%;
    display: flex;
    border: 0.1rem solid #cccc;
    font-size: 2.8rem;
}
.tan div:nth-child(2) span{
    flex:1;
}
.tan div:nth-child(2) span:nth-child(1){
    border-right: 0.1rem solid #cccccc;
}
.btn1{
    color: #4c4c4c;
}
.btn2{
    color: #e53e42;
}
/* 宽 */
.w{
    width: calc(100% - 4rem);
    padding: 0 2rem;
}
/* 设置 */
.mainreset{
    width: 100%;
    font-size: 2.8rem;
}
.mreset1{
    width: 100%;
    margin-top: 2rem;
    border-top: 0.1rem solid #ccc;
    background-color: #fff;
}
.mreset1 div{
    line-height: 10rem;
    height: 10rem;
    border-bottom: 0.1rem solid #ccc;
    display: flex;
    position: relative;
}
.mreset1 div span{
    /* flex: 1; */
    text-align: left;
}
.mreset1 div i{
    position: absolute;
    right: 2rem;
    top: calc(50% - 1.5rem);
    height: 3rem;
}
.mreset1 div:nth-child(3) i{
    display: none;
}
.mreset1 div:nth-child(3) em{
    position: absolute;
    top: 0;
    right: 2.4rem;
    color: #808080;
}
/* 查询中 */
.msearch{
    position: relative;
    top: 4.8rem;
    left: calc(50% - 10rem);
    margin-top: 0 auto;
    height: 6rem;
    width: 19.8rem;
    border: 0.1rem solid #ccc;
    background-color: #797979;
    font-size: 3rem;
    color: #fff;
    line-height: 6rem;
}
/* 手机号修改 */
.mainPwd{
    width: 100%;
}
.mainPwd input{
    width: calc(100% - 4rem);
    margin: 0 2rem;
    border-bottom: 0.1rem solid #cccccc;
    height: 4.5rem;
    padding-top: 3.5rem;
    background-color: #f2f2f2;
    font-size: 2.8rem;
}

/* 公用 */
.Mainbox{
    font-size: 0;
}
.main{
    font-size: 3rem;
}
.HeadTop1 i:nth-child(1){
    height: 3.8rem;
    width: 3.8rem;
    position: absolute;
    top: 50%;
    left: 1.3rem;
    transform: translateY(-1.9rem);
    background: url(../../assets/user/user-wback.png) no-repeat 0 0;
}
.HeadTop1 em{
    height: 9.6rem;
    line-height: 9.6rem;
    position: absolute;
    right: 2rem;
    top: 0;
    font-size: 3rem;
}
/* 列表信息 */
.main{
    width: 100%;
}
.main .mainList{
    background-color: #fff;
}
.mainList li {
    width: calc(100% - 4rem);
    padding: 0 2rem;
    display: flex;
    position: relative;
}
.mainList li span{
    flex: 1;
}
.mainList li span:nth-of-type(1){
    text-align: left;
}
.mainList li span:nth-of-type(2){
    text-align: right;
    padding-right: 4rem;
}
.mainList li i{
    height: 3rem;
    width: 3rem;
    /* background-color: #00f; */
    position: absolute;
    right: 2rem;
    top: calc(50% - 1.5rem);
   
}
.mainList li:nth-of-type(1){
    height: 13.8rem;
    border-bottom:  0.1rem solid #cccccc;
    color: #4c4c4c;
}
.mainList li:nth-of-type(1) span:nth-child(1){
    line-height: 13.8rem;
}
.mainList li span:nth-of-type(2){
    position: relative;
    font-size: 2.4rem;
}
.mainList li:nth-of-type(1) span:nth-of-type(2) i:nth-child(1){
    position: absolute;
    right: 4rem;
    top: calc(50% - 5rem);
    height: 6rem;
    width: 6rem;
    text-align: center;
    white-space: wrap;
    border: 0.1rem solid #ccc;
    border-radius: 50%;
    padding: 2rem 2rem;
}
.mainList li:nth-of-type(2),.mainList li:nth-of-type(3){
    height: 10rem;
    line-height: 10rem;
    border-bottom:  0.1rem solid #cccccc;
}
.mainList li:nth-of-type(2) span:nth-child(1),.mainList li:nth-of-type(3) span:nth-child(1){
    line-height: 10rem;
}
.mainList li:nth-of-type(2) span:nth-child(2) i,.mainList li:nth-of-type(3) span:nth-child(2) i{
    position: absolute;
    top: 0;
    right: 4rem;
    line-height: 10rem;
    width: 100%;
}
</style>